<template>
  <div>
    <el-dialog
      @close="cancelShow()"
      v-model="state.dialogUploadVisible"
      :lock-scroll="false"
      draggable
      width="500px"
    >
      <template #header>
        <div style="color: #fff">
          <el-icon
            size="16"
            style="margin-right: 3px; display: inline; vertical-align: middle"
          >
            <UploadFilled />
          </el-icon>
          <span> 上传文件 </span>
        </div>
      </template>
      <div>
        <el-upload
          ref="uploadRef"
          drag
          :auto-upload="false"
          :headers="uploadHeaders"
          :limit="1"
          :file-list="state.fileList"
           action="/api/v1.0/doctor/importExcel"
          :on-change="handleChange"
          :on-exceed="handleExceed"
          :on-success="handleSuccess"
          :accept="state.accept"
        >
          <el-icon class="el-icon--upload">
            <UploadFilled />
          </el-icon>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">请上传大小不超过 50MB 的文件</div>
          </template>
        </el-upload>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelShow()" size="large">取消</el-button>
          <el-button type="primary" @click="uploadFile" size="large"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { UploadFilled } from "@element-plus/icons-vue";
import { getToken } from "@/utils/common";
import http from "@/utils/request";
export default {
  props: {
    state: {
      type: Object,
      default: () => ({
        dialogUploadVisible: false,
        accept: ".xlsx,.csv",
      }),
    },
  },

  data() {
    return {
      //上传文件
      fileList: [],
    };
  },
  computed: {
    uploadHeaders() {
      // 返回包含 token 的请求头
      const token=getToken();
      return {
        token: `${token}`,
      };
    },
  },
  methods: {
    //关闭弹窗
    cancelShow() {
      this.state.dialogUploadVisible = false;
    },
    //上传文件
    uploadFile(file, fileList) {
      this.$refs.uploadRef.submit()
    },
    handlePreview(file) {
      console.log(file);
    },
    handleChange(files, fileList) {
      console.log(files);
    },
    handleExceed(files, fileList) {
      files.forEach((file) => {
        // 文件格式验证
        const allowedExtensions = [".xlsx", ".csv"];
        const fileExtension = file.name.split(".").pop().toLowerCase();
        if (!allowedExtensions.includes(fileExtension)) {
          this.$message.error("文件格式错误");
          return;
        }

        // 文件大小验证
        const maxSize = 50 * 1024 * 1024; // 500MB
        if (file.size > maxSize) {
          this.$message.error("文件大小超过 50M");
          return;
        }
      });
     
    },
   
    handleSuccess(response, file, fileList) {
      // 假设后端返回的结果中有 code 字段
      if (response.code === 200) {
        this.$message.success("上传成功");
        this.$refs.uploadRef.clearFiles()
        this.state.dialogUploadVisible = false;
        this.$emit("changeDrug",false);
      } else {
        this.$refs.uploadRef.clearFiles()
        this.state.dialogUploadVisible = false;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.width {
  width: 90%;
  max-width: 375px;
  padding: 10px 20px 20px 20px;
  border: 2px solid #0077ff; /* 设置边框宽度为 10px，颜色为蓝色 */
  border-top-width: 6px; /* 设置上边框宽度为 20px */
  border-radius: 6px; /* 设置边角为圆角，半径为 10px */
}
.border {
  border: 2px solid #f4f4f4; /* 设置边框宽度为 10px，颜色为蓝色 */
  border-top-width: 6px; /* 设置上边框宽度为 20px */
  border-radius: 6px; /* 设置边角为圆角，半径为 10px */
}
.mb-1 {
  margin-bottom: 10px;
}
.mr-2 {
  margin-right: 10px;
}
.fa-star {
  font-size: 20px;
  color: rgb(240, 185, 47);
}

:deep(.el-dialog__header) {
  padding: 30px;
  background-color: #016dff;
  margin: 0;
  height: 14px;

  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__headerbtn {
    top: 10px;
  }
}
:deep(.el-dialog__title) {
  color: #fff;
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
}
</style>
